<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript" src="../jqtool/jquery.tools.min.js">
        </script>
        <style type="text/css">
            body {
                padding: 50px 80px;
                font-family: "Lucida Grande", "bitstream vera sans", "trebuchet ms", sans-serif, verdana;
            }
            
            /* get rid of those system borders being generated for A tags */
            a:active {
                outline: none;
            }
            
            a:focus {
                -moz-outline-style: none;
            }
        </style>
        <style type="text/css">
            
            /* root element for accordion. decorated with rounded borders and gradient background image */ #accordion {
                background: #333 url(./img/gradient/h300.png) 0 0;
                width: 300px;
                border: 1px solid #333;
                -background: #666;
                margin: 0 auto;
            }
            
            /* accordion header */ #accordion h2 {
                background: #ccc url(./img/gradient/h30.png);
                line-height: 14px;
                margin: 0;
                padding: 5px 15px;
                font-size: 14px;
                font-weight: normal;
                border: 1px solid #fff;
                border-bottom: 1px solid #ddd;
                cursor: pointer;
            }
            
            /* currently active header */ #accordion h2.current {
                cursor: default;
                background-color: #fff;
            }
            
            /* accordion pane */ #accordion .pane {
                border: 1px solid #fff;
                border-width: 0 2px;
                display: none;
                height: 180px;
                padding: 15px;
                color: #fff;
                font-size: 12px;
            }
            
            /* a title inside pane */ #accordion .pane h3 {
                font-weight: normal;
                margin: 0;
                font-size: 16px;
                color: #999;
            }
        </style>
    </head>
    <body>
        <div id="accordion">
            <h2 class="current">First pane</h2>
            <div class="pane" style="display:block">
                <img src="./img/title/javascript24.png" alt="JavaScript tools" style="float:left; margin:0 15px 15px 0"/><h3>Lorem ipsum dolor</h3>
                <p>
                    <strong>Fusce semper, nisi nec pellentesque sollicitudin.</strong>
                </p>
                <p style="clear:both">
                    Consectetur adipiscing elit. Praesent bibendum eros ac
                    nulla. Integer vel lacus ac neque viverra ornare. Nulla id
                    massa nec erat laoreet elementum. Vivamus tristique auctor
                    odio. Integer mi neque.
                </p>
            </div>
            <h2>Second pane</h2>
            <div class="pane">
                <h3>Vestibulum ante ipsum</h3>
                <p>
                    Cras diam. Donec dolor lacus, vestibulum at, varius in, mollis
                    id, dolor. Aliquam erat volutpat. Praesent pretium tristique
                    est. Maecenas nunc lorem, blandit nec, accumsan nec, facilisis
                    quis, pede. Aliquam erat volutpat. Donec sit amet urna quis
                    nisi elementum fermentum.
                </p>
            </div>
            <h2>Third pane</h2>
            <div class="pane">
                <h3>Curabitur vel dolor</h3>
                <p>
                    Non lectus lacinia egestas. Nulla hendrerit, felis quis
                    elementum viverra, purus felis egestas magna, non vulputate
                    libero justo nec sem. Nullam arcu. Donec pellentesque
                    vestibulum urna. In mauris odio, fringilla commodo, commodo
                    ac, dignissim ac, augue.
                </p>
            </div>
        </div>
        <!-- activate tabs with JavaScript -->
        <script type="text/javascript">
            $(function(){
                $("#accordion").tabs("#accordion div.pane", {
                    tabs: 'h2',
                    effect: 'slide',
                    initialIndex: null
                });
            });
        </script>
        <script type="text/javascript">
            // add new effect to the tabs
            $.tools.tabs.addEffect("slide", function(i, done){
                // 1. upon hiding, the active pane has a ruby background color
                this.getPanes().slideUp().css({
                    backgroundColor: "#b8128f"
                });
                
                // 2. after a pane is revealed, its background is set to its
                // original color (transparent)
                this.getPanes().eq(i).slideDown(function(){
                    $(this).css({
                        backgroundColor: 'transparent'
                    });
                    
                    // the supplied callback must be called after the effect has
                    // finished its job
                    done.call();
                });
            });
        </script>
    </body>
</html>
